<template>
  <custom-dialog v-model:visible="isShowDialog">
    <div class="dialog-content">
      <div class="dialog-header-box"></div>
      <div class="title">取物记录</div>
    </div>
    <div class="dialog-gap"></div>
    <div class="search-wrap">
      <el-date-picker
        class="search-date-box"
        v-model="dateRangeList"
        type="daterange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="onSearch"
      />
      <div class="search-input-box">
        <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
        <input
          class="input"
          v-model.trim="searchParam.search"
          type="text"
          placeholder="请输入取物人姓名/手机号"
          @input="onSearch"
        />
      </div>
    </div>
    <div class="table-box">
      <div class="table-list">
        <el-table v-loading="loading" element-loading-text="加载中..."  :data="tableDataList" border height="320px">
          <el-table-column show-overflow-tooltip align="center" prop="storage_id" label="取物ID" />
          <el-table-column show-overflow-tooltip align="center" prop="take_user_name" label="取物人" />
          <el-table-column show-overflow-tooltip align="center" prop="take_mobile" label="手机号" />
          <el-table-column show-overflow-tooltip align="center" prop="take_num" label="数量" />
          <el-table-column show-overflow-tooltip align="center" prop="take_location" label="取物位置" />
          <el-table-column show-overflow-tooltip align="center" prop="create_time" label="取物时间" />
        </el-table>
      </div>
    </div>
    <div class="data-summary-box">
      <Pagination
        @pagination="getUserStorageList"
        :total="pageListTotal"
        v-model:page="searchParam.page"
        v-model:limit="searchParam.limit"
        :pageSizes="[15, 45, 75, 100]"
      />
    </div>
  </custom-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { userStorageList } from '@/api/userStorage'
import { debounce } from '@/utils/toolsValidate'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'

const props = defineProps({
  takeListVisible: { type: Boolean, default: false }
})
const emit = defineEmits(['update:takeListVisible'])

const isShowDialog = computed({
  get: () => props.takeListVisible,
  set: val => emit('update:takeListVisible', val)
})

const searchParam = reactive({ page: 1, limit: 15, search: null, keep_status: -1, betweenTime: null, status: 1 })
const tableDataList = ref([])
const dateRangeList = ref([])
const pageListTotal = ref(0)
const loading = ref(false)

function onCancel() {
  emit('update:takeListVisible', false)
}

const onSearch = debounce(function (val) {
  if (val && Object.prototype.toString.call(val) === '[object Array]') {
    searchParam.betweenTime = [val[0] + ' 00:00:00', val[1] + ' 23:59:59']
  } else {
    searchParam.betweenTime = null
  }
  searchParam.page = 1
  getUserStorageList()
}, 500)

function getUserStorageList() {
  loading.value = true
  userStorageList(searchParam).then(res => {
    if (res.status === 200) {
      tableDataList.value = (res?.data?.list?.data) || []
      pageListTotal.value = (res?.data?.list?.total) || 0
      loading.value = false
    }
  }).finally(() => {
    loading.value = false
  })
}

watch(
  () => isShowDialog.value,
  val => {
    if (val) {
      searchParam.page = 1
      searchParam.limit = 15
      searchParam.search = null
      searchParam.keep_status = -1
      searchParam.betweenTime = null
      getUserStorageList()
    }
  }
)
</script>

<style lang="scss">
.search-date-box {
    width: 100px !important;
    height: 46px !important;
    border-radius: 25px !important;
    box-sizing: border-box;
    padding-left: 20px !important;
    margin-right: 620px;
    
    .el-range-input {
      height: 36px !important;
      line-height: 36px !important;
    }
    
    .el-range-separator {
      line-height: 36px !important;
    }
    
    .el-input__inner {
      height: 36px !important;
      line-height: 36px !important;
    }
  }
</style>

<style lang="scss" scoped>
::v-deep {
  .el-dialog {
    border-radius: 20px;
  }
  .el-table {
    border-radius: 0;
  }
  .el-table__body-wrapper {
    height: 520px !important;
    overflow-y: auto;
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px !important;
    height: 0 !important;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    height: 200px !important;
    background: #d2d2d2 !important;
    border-radius: 3px !important;
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    display: none !important;
  }
  .el-table th.el-table__cell {
    background: #a85b62;
    color: #fff !important;
  }
  .el-dialog__body { padding: 0; }
  .el-dialog__header { padding: 0; }
  .el-input__inner { border-radius: 12px; }
  .el-date-editor { width: 452px; height: 48px; }
}
.dialog-content { display: flex; width: 100%; padding-right: 30px; box-sizing: border-box; }
.dialog-content .dialog-header-box { width: 33%; }
.dialog-content .title { width: 33%; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; color: #333333; text-align: center; }
.dialog-content .img-box { width: 33%; display: flex; justify-content: flex-end; }
.search-wrap { padding: 20px 0 20px 30px; box-sizing: border-box; display: flex; align-items: center; }
.search-wrap .search-input-box { width: 380px; height: 48px; border: 1px solid #d2d2d2; border-radius: 10px; box-sizing: border-box; display: flex; align-items: center; padding-left: 20px; margin-left: 10px; }
.search-wrap .search-input-box .search-icon { flex-shrink: 0; width: 24px; height: 24px; }
.search-wrap .search-input-box .input { border: none; outline: none; width: 198px; font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; margin-left: 10px; }
.search-wrap .search-input-box .input::placeholder { font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #b2b2b2; margin-left: 10px; }
.table-box { width: 100%; display: flex; justify-content: center; align-items: center; }
.table-box .table-list { width: 1400px; }
.data-summary-box { margin-top: 28px; display: flex; justify-content: flex-end; padding-right: 30px; box-sizing: border-box; align-items: center; padding-bottom: 30px; }
</style>
